<template>
  <div class="app-container">
    <h2 class="con-title">修改密码</h2>
    <div class="content">
      <el-form :model="pwdForm" status-icon :rules="pwdRules" ref="pwdForm" label-width="100px" class="pwd-form" size="mini">
        <el-form-item label="原始密码" prop="oldPwd">
          <el-input type="password" v-model="pwdForm.oldPwd" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="uPwd">
          <el-input type="password" v-model="pwdForm.uPwd" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="pwdForm.checkPass" auto-complete="off"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="14">
            <el-form-item label="验证码" prop="code">
              <el-input v-model.number="pwdForm.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <img v-if="img_code" class="code-img" @click="changeImgCode" :src="img_code">
            <el-button v-else class="code-img" type="text" @click="changeImgCode" size="mini">重新获取验证码</el-button>

          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('pwdForm')">提交</el-button>
          <el-button @click="resetForm('pwdForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>


  </div>
</template>
<script>
  import {
    getCodeImg
  } from '@/api/user'
  import {
    encryptString
  } from '@/utils'
  export default {
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.pwdForm.uPwd) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        img_code: '',
        codeParams: {
          tt: 0,
          token: Math.random().toString(36).substr(2),
          type: 1
        },
        pwdForm: {
          oldPwd: '',
          uPwd: '',
          checkPass: '',
          code: ''
        },
        pwdRules: {
          oldPwd: [{
            required: true,
            message: '请输入原始密码',
            trigger: 'blur'
          }, {
            min: 6,
            message: '密码不能小于6位',
            trigger: 'blur'
          }],
          uPwd: [{
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          }, {
            min: 6,
            message: '密码不能小于6位',
            trigger: 'blur'
          }],
          checkPass: [{
            required: true,
            validator: validatePass2,
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const formData = {
              oldPwd: encryptString(this.pwdForm.oldPwd),
              uPwd: encryptString(this.pwdForm.uPwd),
              code: this.pwdForm.code,
              token: this.codeParams.token
            }
            this.$store.dispatch('ResetPwd', formData).then(response => {
              this.$alert('修改密码成功，请重新登录。', {
                confirmButtonText: '确定',
                type: 'success',
                showClose: false,
                callback: action => {
                  location.reload() // 为了重新实例化vue-router对象 避免bug
                }
              })
            }).catch(() => {
              // 重新获取图片验证码
              this.changeImgCode()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      changeImgCode() {
        this.codeParams.tt = Date.parse(new Date())
        // 获取图片验证码接口
        getCodeImg(this.codeParams)
          .then(response => {
            return 'data:image/png;base64,' + btoa(
              new Uint8Array(response).reduce((data, byte) => data + String.fromCharCode(byte), '')
            )
          }).then(data => {
            this.img_code = data
          })
      },
      init() {
        this.changeImgCode()
      }
    },
    mounted() {
      this.init()
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss">
  @import 'src/assets/css/sui-style.scss';
  .pwd-form {
    width: 320px;
  }

  .code-img {
    height: 100%;
    vertical-align: middle;
    float: right;
  }

</style>
